import styles from './index.module.scss'
import { devDependencies } from '../../../package.json'
import logoSrc from '@/assets/imgs/logo.jpg'
import testSrc from '@/assets/imgs/box.png'
import ReactLogo from '@/assets/icons/react.svg?react'
// import Worker from './worker.example.js?worker'
import SvgIcon from '../SvgIcon'

const icons = import.meta.glob('@/assets/icons/logo*.svg', {
  eager: true,
  import: 'default' // 可选：直接导入默认导出
})
const iconUrls = Object.keys(icons).map((mod) => {
  const fileName = mod.split('/').pop()
  const svgName = fileName?.split('.')[0]
  return svgName
})
console.log(
  '%c [ iconUrls ]-14',
  'font-size:13px; background:#d2f851; color:#ffff95;',
  iconUrls
)

// 1. 初始化 Worker 实例
// const worker = new Worker()
// // 2. 主线程监听 worker 的信息
// worker.addEventListener('message', (e) => {
//   console.log(e)
// })
// const testSrc2 = new URL('./test.png', import.meta.env.VITE_IMG_BASE_URL).href

export function Header() {
  return (
    <div className={`${styles.header} flex-c flex-col`}>
      <span className="font-bold">This is Header!!!</span>
      <span>vite-version: {devDependencies.vite}</span>
      <img src={logoSrc} className="w-30 mt-8 mb-4" alt="" />
      <ReactLogo className="w-10 h-10" />
      <img src={testSrc} className="w-30 mt-4 mb-4" alt="" />
      {/* <img src={testSrc2} /> */}
      {iconUrls.map((item) => (
        // <img src={item} key={item} className="w-8 mt-4 mb-4" alt="" />
        <SvgIcon name={item} key={item} color="#fff" width="20" height="20" />
      ))}
    </div>
  )
}
